<!--
 * @Author: ylyu
 * @Date: 2024-02-04 12:05:29
 * @LastEditors: ylyu
 * @LastEditTime: 2024-02-21 09:53:25
 * @Description: 
-->
<template>
  <div id="app-base-screen">
    <div class="one-block-1">
      <span> 1. 系统主题模式 </span>
    </div>
    <div class="one-block-2">
      <a-space>
        <a-button @click="getTheme()">获取模式</a-button>
      </a-space>
      <span> 结果：{{ currentThemeMode }} </span>
    </div>
    <div class="one-block-1">2. 设置主题模式（请自行实现前端UI效果）</div>
    <div class="one-block-2">
      <a-radio-group v-model="currentThemeMode" @change="setTheme">
        <a-radio :value="themeList[0]">
          {{ themeList[0] }}
        </a-radio>
        <a-radio :value="themeList[1]">
          {{ themeList[1] }}
        </a-radio>
        <a-radio :value="themeList[2]">
          {{ themeList[2] }}
        </a-radio>
      </a-radio-group>
    </div>
  </div>
</template>
<script>
import { ipcApiRoute } from '@/utils/ipcMainApi'
import { ipc } from '@/utils/ipcRenderer'

export default {
  data() {
    return {
      currentThemeMode: '',
      themeList: ['system', 'light', 'dark'],
    }
  },
  mounted() {
    this.getTheme()
    // this.setTheme()
  },

  methods: {
    setTheme(value) {
      this.currentThemeMode = value || 'dark'
      console.log('setTheme currentThemeMode:', this.currentThemeMode)

      ipc.invoke(ipcApiRoute.setTheme, this.currentThemeMode).then((result) => {
        console.log('result:', result)
        if (result === 'dark') {
          // 设置为暗黑主题
          document.body.setAttribute('arco-theme', 'dark')
        } else {
          // 恢复亮色主题
          document.body.removeAttribute('arco-theme')
        }
        this.currentThemeMode = result
      })
    },
    getTheme() {
      ipc.invoke(ipcApiRoute.getTheme).then((result) => {
        console.log('获取主题:', result)
        this.currentThemeMode = 'dark'
      })
    },
  },
}
</script>
<style lang="less" scoped>
#app-base-screen {
  padding: 0px 10px;
  text-align: left;
  width: 100%;
  .one-block-1 {
    font-size: 16px;
    padding-top: 10px;
  }
  .one-block-2 {
    padding-top: 10px;
  }
}
</style>
